<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <style type="text/css">
            #usernamespan, #passwordspan, #repasswordspan {
                color: red;
            }
        </style>
    </head>
    <body>
        <!--注册页面-->
        <form action="#" method="post" autocomplete="off" id="frm">
            <!--6行2列-->
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username" id="username" onblur="checkUserName()"/></td>

                    <!--接收用户名的错误信息-->
                    <td>
                        <span id="usernamespan"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password" id="password" onblur="checkPassword()"/></td>

                    <!--接收密码的错误信息-->
                    <td>
                        <span id="passwordspan"></span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" name="repassword" id="repassword" onblur="checkRePasswd()"/></td>

                    <!--接收确认密码的错误信息-->
                    <td>
                        <span id="repasswordspan"></span>
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="gender" value="male"/>男
                        <input type="radio" name="gender" value="female"/>女
                    </td>
                    <!--接收性别的错误信息-->
                    <td><span id="genderspan"></span></td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <input type="checkbox" name="hobby" value="sing"/>唱歌
                        <input type="checkbox" name="hobby" value="dance"/>跳舞
                        <input type="checkbox" name="hobby" value="code"/>写代码
                    </td>
                    <!--接收爱好的错误信息-->
                    <td><span id="hobbyspan"></span></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="注册"/>
                        <input type="reset" value="重置"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

<script type="text/javascript">

    document.getElementById("frm").onsubmit= function () {
        if(checkUserName() && checkPassword() && checkRePasswd()){
            return true;
        }else{
            return false;
        }
    }



    //验证：确定密码
    function checkRePasswd() {
        //获取密码框标签对象
        var pwdObj = document.getElementById("password");

        //获取确认密码框标签对象
        var rePwdObj = document.getElementById("repassword");

        //分别获取两个密码框中的value值
        var pwdValue = pwdObj.value;
        var rePwdValue = rePwdObj.value;

        var spanObj = document.getElementById("repasswordspan");

        var result = pwdValue == rePwdValue;


        //判断：两个value值是否相同
        if(result){
           spanObj.innerHTML="";
        }else{
           spanObj.innerHTML="两次输入密码不一致";
        }

        return result;
    }
    




    //验证：密码
    function checkPassword() {

        var pwdObj = document.getElementById("password");

        //验证密码：密码长度必须是6位的任意字符
        var regExp = /^.{6}$/;

        //获取密码框中的value值
        var passwordValue = pwdObj.value;

        //利用正则校验
        var result = regExp.test(passwordValue);

        var spanObj = document.getElementById("passwordspan");

        if(!result){
            //非法
            spanObj.innerHTML="密码长度必须6位的任意字符";
        }else{
            //合法
            spanObj.innerHTML="";
        }

        return result;
    }
    
    

    //验证：用户名
    function checkUserName() {
        //根据id，获取文本框标签对象
        var txtObj = document.getElementById("username");

        //验证用户名是否满足：用户名必须是6-10位的字母或者数字
        var regExp = /^[0-9a-zA-Z]{6,10}$/

        //获取文本框中的value值
        var usernameValue = txtObj.value;

        //利用正则表达式：检验字符串
        var result = regExp.test(usernameValue);

        //获取span标签对象
        var spanObj = document.getElementById("usernamespan");

        //判断： 用户名输入不合法
        if (!result) {
            spanObj.innerHTML="用户名必须是6-10位的字母或者数字";
        }else{
            spanObj.innerHTML="";
        }

        return result;
    }

</script>


